<script setup>
import { ref } from 'vue';
const addValue = ref("")
const list = ref([
    { id: 1, name: '吃饭' },
    { id: 2, name: '睡觉' },
    { id: 3, name: '写代码' },
])
const delItem = (id) => list.value = list.value.filter(item => item.id != id)
const addItem = () => {
    let id = 0
    // 如果输入框内有值
    if (addValue.value) {
        id = list.value.length + 1
        console.log(id);
        console.log(addValue.value);


        // console.log(newId)
        // list.value.push({ id, name: addValue.value })
        list.value.push({ id: 78, name: addValue.value })
        console.log(list.value);

    } else {
        alert("输入内容不能为空")
    }

}
</script>

<template>
    <div>
        <div>
            <input type="text" v-model="addValue"> <button @click="addItem">添加</button>
        </div>

        <table border="">
            <thead>
                <th>标识</th>
                <th>待办事项</th>
                <th>操作</th>
            </thead>
            <tbody>
                <tr v-for="(item, index) in list" :key="index">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>
                        <a @click="delItem(item.id)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>